<template>
    <div class="admin-navbar">
        <div class="logo-container">
            <div class="logo">
                <el-icon class="logo-icon" ><Box /></el-icon>
                <span class="system-name" v-show="!isCollapse">平台管理</span>
            </div>
        </div>

        <el-menu
                :default-active="$route.path"
                :collapse="isCollapse"
                :collapse-transition="false"
                router
                class="vertical-menu"
                background-color="#2d3a4b"
                text-color="#b7c0cd"
                active-text-color="#409eff"
        >


      <el-menu-item index="/production">
                <svg-icon icon-class="sblist" class="submenu-icon" />
                生产线主页
            </el-menu-item>
        <el-sub-menu index="device-management">
            <template #title>
                <svg-icon icon-class="cloud" class="menu-icon" />
                <span class="menu-text">设备管理</span>
            </template>
            <el-menu-item index="/device/list">
                <svg-icon icon-class="sblist" class="submenu-icon" />
                设备列表
            </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="process-management" >
            <template #title>
                <svg-icon icon-class="template" class="menu-icon" />
                <span class="menu-text">工序区管理</span>
            </template>
            <el-menu-item index="/process/list">
                <svg-icon icon-class="list" class="submenu-icon" />
                工序区管理
            </el-menu-item>
            <el-menu-item index="/process/device">
                <svg-icon icon-class="list" class="submenu-icon" />
                为工序区分配设备
            </el-menu-item>
            <el-menu-item index="/process/addtask">
                <svg-icon icon-class="list" class="submenu-icon" />
                为生产线创建工序区
            </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="line-management">
            <template #title>
                <svg-icon icon-class="chart" class="menu-icon" />
                <span class="menu-text">产线管理</span>
            </template>
            <el-menu-item index="/line/list">
                <svg-icon icon-class="list" class="submenu-icon" />
                产线列表
            </el-menu-item>
            <el-menu-item index="/line/free">
                <svg-icon icon-class="list" class="submenu-icon" />
                空闲产线分配
            </el-menu-item>
            <el-menu-item index="/line/stop-order">
                <svg-icon icon-class="list" class="submenu-icon" />
                停止订单执行
            </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="order-management">
            <template #title>
                <svg-icon icon-class="chart" class="menu-icon" />
                <span class="menu-text">订单管理</span>
            </template>
            <el-menu-item index="/order/list">
                <svg-icon icon-class="list" class="submenu-icon" />
                订单列表
            </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="data-management">
            <template #title>
                <svg-icon icon-class="template" class="menu-icon" />
                <span class="menu-text">数据管控</span>
            </template>
            <el-menu-item index="/process/history">
                <svg-icon icon-class="add" class="submenu-icon" />
                生产记录
            </el-menu-item>
            <el-menu-item index="/process/parameter">
                <svg-icon icon-class="list" class="submenu-icon" />
                设备生产参数记录
            </el-menu-item>
        </el-sub-menu>
    </el-menu>
  </div>
</template>
<script setup>
import {ref, watch} from 'vue';
import {Box} from "@element-plus/icons-vue";

const isCollapse = ref(
    localStorage.getItem('sidebarCollapse') === 'true'
);

// 状态变化时保存到 localStorage
watch(isCollapse, (val) => {
    localStorage.setItem('sidebarCollapse', val.toString());
});
</script>
<style scoped>
.admin-navbar {
    width: 240px;
    height: 100vh;
    background: #2d3a4b;
}

.logo-container {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
  display: flex;
  align-items: center;
}

.logo-icon {
  font-size: 28px;
  color: #409eff;
  margin-right: 12px;
}

.system-name {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.vertical-menu {
  border-right: none;
}

.menu-icon {
  font-size: 18px;
  margin-right: 8px;
}

.submenu-icon {
  font-size: 16px;
  margin-right: 10px;
}

.menu-text {
  font-size: 14px;
}

.el-menu-item {
  height: 48px;
  line-height: 48px;
  margin: 4px 0;
}

.el-menu-item.is-active {
  background-color: rgba(64, 158, 255, 0.1) !important;
}

.el-sub-menu__title {
  height: 48px;
  line-height: 48px;
}
</style>
